<template>
    <div class="test">
        <h1>在线测试</h1>
        <div class="btns">
            <div class="test1">
                <el-button @click="test1" class="btn" type="primary">测试1</el-button>
                <el-input v-model="test1Value"></el-input>
            </div>
            <div class="test1">
                <el-button class="btn" type="primary">测试1</el-button>
                <el-input></el-input>
            </div>
            <div class="test1">
                <el-button class="btn" type="primary">测试1</el-button>
                <el-input></el-input>
            </div>

        </div>
        <div class="content">{{ content }}</div>
    </div>
</template>
<script>
import Axios from 'axios';

export default {
    data() {
        return {
            content: '当有返回内容时，这段文字会更新',
            test1Value: 'date'
        }
    },
    methods: {
        test1() {
            let token = localStorage.getItem('token') || undefined;
            let headers = { 'Authorization': token }
            if (token === undefined) {
                this.$message.error('登陆无效或过期，请重新登陆！')
            } else {
                this.$message.success('send success！')
                Axios({
                    method: 'get',
                    url: `http://c7.cabc.top:8222/api/v1.0/command?cmd=${this.test1Value}`,
                    headers,
                }).then(res => {
                    if (res.data.code === "0") {
                        this.content = res.data.data[0]
                    }
                }).catch(err => {
                    this.$message.error('error')
                    console.log(err);
                })
            }


        }

    }
}
</script>
<style scoped>
.test {
    margin: 100px;
}

.btns {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 50px;
    width: 100%;
}

.btn {
    height: 50px;

    margin: 50px 10px;
}

.content {
    border: 1px solid black;
    padding: 50px;
}
</style>
    